<template>
  <div class="reginter">
    <div class="tab">
      <el-link type="primary" :underline="false">手机号找回</el-link>
    </div>
    <el-form :model="pwdResetForm" :rules="pwdResetRules" ref="pwdResetForm">
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="pwdResetForm.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item class="drag-verify">
        <edu-drag-verify
          ref="dragVerify"
          :height="38"
          :width="340"
          radius="2px"
          :isPassing.sync="isPassing"
          text="请按住滑块，拖动到最右边"
          successText="验证通过"
          handlerIcon="el-icon-d-arrow-right"
          successIcon="el-icon-circle-check"
          @passcallback="passcallback('pwdResetForm')"
        ></edu-drag-verify>
      </el-form-item>
      <el-form-item prop="verify">
        <el-row type="flex" class="verifyCode">
          <el-input v-model="pwdResetForm.verify" placeholder="请输入验证码"></el-input>
          <EduVerificationCode
            @start="getVerifyCode('registerForm')"
            :disabled="btnDisabled"
          ></EduVerificationCode>
        </el-row>
      </el-form-item>
      <el-form-item label="设置密码" prop="password">
        <el-input
          type="password"
          v-model="pwdResetForm.password"
          placeholder="密码长度为6～20个字符"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="password2">
        <el-input
          type="password"
          v-model="pwdResetForm.password2"
          placeholder="再次输入新密码"
        ></el-input>
      </el-form-item>
      <div class="reginter-footer">
        <el-button type="primary" @click="handlePwdReset('pwdResetForm')">确定</el-button>
        <el-row type="flex" align="middle">
          <span class="no-text">已有账号？</span>
          <el-link type="primary" :underline="false" @click="goLogin">去登录</el-link>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import EduDragVerify from '@/components/EduDragVerify'
import EduVerificationCode from '@/components/EduVerificationCode'
import md5 from 'spark-md5'
export default {
  components: {
    EduDragVerify,
    EduVerificationCode
  },
  data() {
    // 手机号码的校验
    var testPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        callback()
      }
    }
    // 密码的验证
    var testPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (!this.$util.password(value)) {
          callback(new Error('密码格式不正确'))
        } else {
          callback()
        }
      }
    }
    // 确认密码验证
    var testUsedPassWord = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.pwdResetForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      isPassing: false,
      pwdResetForm: {
        phone: '',
        password: '',
        password2: '',
        verify: ''
      },
      // 验证规则
      pwdResetRules: {
        phone: [{ validator: testPhone, trigger: 'blur' }],
        verify: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ],
        password: [{ validator: testPassword, trigger: 'blur' }],
        password2: [{ validator: testUsedPassWord, trigger: 'blur' }]
      },
      // 验证码倒计时参数
      btnDisabled: true
    }
  },
  computed: {
    loginRouteName() {
      return this.$store.getters['projectSetting/getGlobLoginRouteName']
    }
  },
  created: function() {
    // 注册回车事件
    document.onkeydown = e => {
      var key = window.event.keyCode
      if (key == 13) {
        this.handleRegister('pwdResetForm')
      }
    }
  },
  methods: {
    // 提交重置成功
    handlePwdReset(formName) {
      var that = this
      that.$refs[formName].validate(valid => {
        if (valid) {
          this.$api.updateAccountPwdReset(
            {
              ...that.pwdResetForm,
              password: md5.hash(that.pwdResetForm.password)
            },
            res => {
              that.$message.success(res.msg)
              this.$emit('currentTab', this.loginRouteName) // 密码重置成功切换到登录
              that.$refs[formName].resetFields() // 修改成功重置表单
            },
            error => {
              that.$message.error(error.msg)
            }
          )
        } else {
          return false
        }
      })
    },
    // 切换到登录
    goLogin() {
      this.$emit('currentTab', this.loginRouteName)
    },
    // 滑动验证
    passcallback(formName) {
      var that = this
      that.$refs[formName].validateField('phone', valid => {
        if (!valid) {
          this.btnDisabled = false
        } else {
          that.dragVerifyReset()
          return false
        }
      })
    },
    // 获取验证码
    getVerifyCode() {
      var that = this
      this.$api.createSmsVerify(
        { phone: that.pwdResetForm.phone, type: 'reset' },
        res => {
          that.$message.success(res.msg)
        },
        error => {
          that.$message.error(error.msg)
        }
      )
    },
    // 重置滑动验证
    dragVerifyReset() {
      var that = this
      that.isPassing = false
      that.$refs.dragVerify.reset()
    }
  }
}
</script>
